<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>日历</title>
    <style>
        td{
            width: 50px;
        }
        th{
            background-color: beige;
        }
        table{
            padding: 0 20px;
            float: left;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
    var todayDate = new Date();
    var thisYear = todayDate.getFullYear();
    var thisMonth= todayDate.getMonth();
    var thisDate = todayDate.getDate();
    var thisDay = todayDate.getDay();
    var beginAt = thisDate;
    while(beginAt>7){
        beginAt-=7;
    }
    beginAt = thisDay-beginAt+1;
    if(beginAt<0){
        beginAt +=7;
    }
    var monthDay = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
    if(((thisYear%4==0)&&!(thisYear%100==0))||(thisYear%400==4)){
        monthDay[1]+=1;
    }
    var table = document.createElement("table");
    var titleTr = document.createElement("Tr");
    var titleTh = document.createElement("Th");
    titleTh.setAttribute("colspan","7");
    titleTh.innerHTML = thisYear + "年"+(thisMonth+1)+"月";
    titleTr.appendChild(titleTh);
    table.appendChild(titleTr);
    document.body.appendChild(table);
    function createTd(v){
        var tempTd = document.createElement("td");
        tempTd.innerHTML=v;
        return tempTd;
    }
    function createTr(v1,v2,v3,v4,v5,v6,v7){
        var tempTr = document.createElement("tr");
        tempTr.appendChild(createTd(v1));
        tempTr.appendChild(createTd(v2));
        tempTr.appendChild(createTd(v3));
        tempTr.appendChild(createTd(v4));
        tempTr.appendChild(createTd(v5));
        tempTr.appendChild(createTd(v6));
        tempTr.appendChild(createTd(v7));
        return tempTr;
    }
    function createCalendar(beginAt,dayperMonth){
        var dayInMonth=new Array();
        for(var i=0;i<beginAt;i++){
            dayInMonth.push("");
        }
        for(var j=1;j<=dayperMonth;j++){
            if(thisDate ==j){
                dayInMonth.push("<font color='red'>"+j.toString()+"</font>");
            }else{
                dayInMonth.push(j.toString());
            }
        }
        if(dayInMonth.length>28&&dayInMonth.length<=35){
            var nums = 35-dayInMonth.length;
            for(var k=0;k<nums;k++){
                dayInMonth.push("");
            }
        }
        if(dayInMonth.length>35&&dayInMonth.length<=42){
            var nums = 42-dayInMonth.length;
            for(var k=0;k<nums;k++){
                dayInMonth.push("");
            }
        }
        while(dayInMonth.length>0){
            table.appendChild(createTr(dayInMonth.shift(),dayInMonth.shift(),dayInMonth.shift(),
            dayInMonth.shift(),dayInMonth.shift(),dayInMonth.shift(),dayInMonth.shift()));
        }
    }
    table.appendChild(createTr("日","一","二","三","四","五","六"));
    createCalendar(beginAt,monthDay[thisMonth]);
    </script>
</body>
</html>